<template>
  <view class="operateShowBox">
    <button class="item" open-type="share">
      <uni-icons type="paperplane" size="25" color="rgb(112, 109, 109)"></uni-icons>
      分享
    </button>
    <button class="item" @click="emit('feedback', '评论')">
      <uni-icons type="chat" size="25" color="rgb(112, 109, 109)"></uni-icons>
      评论
    </button>
    <button class="item" @click="emit('feedback', '点赞')">
      <uni-icons
        :type="props.handUp ? 'heart-filled' : 'heart'"
        size="25"
        color="rgb(112, 109, 109)"
      ></uni-icons>
      <text>2</text>
    </button>
    
    <view @click="emit('feedback', '反馈')"> 
      <uni-icons type="more-filled" size="25" color="rgb(112, 109, 109)"></uni-icons>
    </view>
  </view>
</template>

<!-- 图片展示组件 -->
<script lang="ts" setup>
import uniIcons from '@/components/uni/uni-icons/uni-icons.vue'
import {
  ref,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onActivated,
  onDeactivated,
  onBeforeUnmount,
  defineEmits,
} from 'vue'
import { onShareAppMessage } from '@dcloudio/uni-app'

const props = defineProps({
  handUp: {
    type: Boolean,
    default: false,
  },
})

//点赞事件
const thumbsUp = () => {}

//评论事件
const comments = () => {}

//分享事件
const share = () => {}

//自定义事件，反馈
const emit = defineEmits(['feedback'])

// 组件周期函数--监听组件挂载完毕
onMounted(() => {})
// 组件周期函数--监听组件数据更新之前
onBeforeUpdate(() => {})
// 组件周期函数--监听组件数据更新之后
onUpdated(() => {})
// 组件周期函数--监听组件激活(显示)
onActivated(() => {})
// 组件周期函数--监听组件停用(隐藏)
onDeactivated(() => {})
// 组件周期函数--监听组件销毁之前
onBeforeUnmount(() => {})

onShareAppMessage((options) => {
  return {
    title: '软星工坊',
    desc: '动态趣事',
    path: '/pages/dynamic/dynamic', // 分享的目标路径，可以根据实际情况动态生成
    imageUrl: '', // 分享图片链接（仅支持网络图片）
    success: function () {
      // 分享成功的回调
      uni.showToast({
        title: '分享成功', // 提示信息文字
        icon: 'none', // 图标类型：成功、加载中或无图标
        duration: 2000, // 持续时间，单位毫秒，默认2秒后自动关闭
        mask: true, // 是否显示透明蒙层，防止触摸穿透，默认false
      })
    },
    fail: function () {
      // 分享失败的回调
      uni.showToast({
        title: '分享失败', // 提示信息文字
        icon: 'none', // 图标类型：成功、加载中或无图标
        duration: 2000, // 持续时间，单位毫秒，默认2秒后自动关闭
        mask: true, // 是否显示透明蒙层，防止触摸穿透，默认false
      })
    },
  }
})
</script>

<style scoped lang="scss">
.operateShowBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgb(112, 109, 109);
  font-size: 26rpx;
  margin: 20rpx 0;
  letter-spacing: 2rpx;

  button {
    background-color: transparent !important;
    padding: 0 !important;
    line-height: inherit !important;
    margin: 0 !important;
    width: auto !important;
    font-weight: 500 !important;
    border-radius: none !important;
  }

  image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 5rpx;
  }

  .item {
    display: flex;
    align-items: center;
    font-size: 26rpx;

    &::after {
      border: none !important;
      padding: 0 !important;
      margin: 0 !important;
    }
  }
}
</style>
